<template>
  <div class="app-container">
    <div class="filter-container">
      <el-cascader
          class="filter-item"
          v-model="selectParent" :options="distributorsList"
          :props="distributorsProps"
          placeholder="所属经销商"
          @change="getList"
          style="width: 15%" clearable filterable></el-cascader>
        <el-date-picker
          class="filter-item"
          style="margin-left:10px;"
          v-model="listQuery.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="getList"
          align="right"
        >
        </el-date-picker>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList"
                   style="margin-left: 5px"
        >
          搜索
        </el-button>
      <el-radio-group v-model="listQuery.status" @change="getList"
                      fill="#67C23A"
                      class="filter-item" style="margin-left: 15px"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button :label="1">提现成功</el-radio-button>
        <el-radio-button :label="2">提现失败</el-radio-button>
      </el-radio-group>

      <el-radio-group v-model="listQuery.cash_type" @change="getList"
                      fill="#67C23A"
                      class="filter-item" style="margin-left: 15px"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button :label="1">企业</el-radio-button>
        <el-radio-button :label="2">个人</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="listQuery.is_return" @change="getList"
                      fill="#67C23A"
                      class="filter-item" style="margin-left: 15px"
      >
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button :label="0">未回账</el-radio-button>
        <el-radio-button :label="1">已回账</el-radio-button>
      </el-radio-group>

        <!--      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"-->
        <!--                 @click="handleDownload"-->
        <!--      >-->
        <!--        导出-->
        <!--      </el-button>-->
        <!--      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
        <!--        审核-->
        <!--      </el-checkbox>-->
      <el-card>

        <el-checkbox-group v-model="checkedIds" @change="handleCheckedIdsChange">
          <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
            <el-table-column align="center" label="ID" min-width="80">
              <template slot-scope="scope">
                <el-checkbox :key="scope.row.id" :label="scope.row.id"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column min-width="80" align="center" label="订单编号">
              <template slot-scope="scope">
                <el-link type="success">{{ scope.row.cash_no }}</el-link>

                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="70" align="center" label="取现类型">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cash_type == 1" type="primary">企业</el-tag>
                <el-tag v-else type="success">个人</el-tag>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="80" align="center" label="经销商名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>
            <el-table-column min-width="80" align="center" label="银行名称">
              <template slot-scope="scope">
                <span>{{ scope.row.bank_name }}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>
            <el-table-column min-width="80" align="center" label="银行卡号">
              <template slot-scope="scope">
                <span>{{ scope.row.bank_no|maskBankCard }}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>
            <el-table-column min-width="80" align="center" label="银行户主">
              <template slot-scope="scope">
                <span>{{ scope.row.cert_name }}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>
            <el-table-column min-width="70" align="center" label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.cash_amt }}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="60" align="center" label="提现状态">
              <template slot-scope="scope">
                <el-link type="success" v-if="scope.row.status== 1">成功</el-link>
                <el-link type='error' v-else-if="scope.row.status == 2">失败</el-link>
                <el-link type="info " v-else>提现中</el-link>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="70" align="center" label="提现错误信息">
              <template slot-scope="scope">
                <span v-if="scope.row.error_msg">{{ scope.row.error_msg }}</span>
                <span v-else>无</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="70" align="center" label="提现时间">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at}}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="70" align="center" label="失败回帐状态">
              <template slot-scope="scope">
                <el-link type="success" v-if="scope.row.is_return">已回账</el-link>
                <el-link type="error" v-else>未回帐</el-link>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>

            <el-table-column min-width="70" align="center" label="划账单号">
              <template slot-scope="scope">
                <span >{{scope.row.pay_no}}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>


            <el-table-column min-width="70" align="center" label="回账失败原因">
              <template slot-scope="scope">
                <span >{{scope.row.refund_msg}}</span>
                <!--          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>-->
              </template>
            </el-table-column>
          </el-table>
        </el-checkbox-group>
        <el-divider>
          <el-checkbox :indeterminate="isIndeterminate" style="margin-left:10px;" v-model="checkAll"
                       @change="handleCheckAllChange"
          >全选
          </el-checkbox>
<!--          <el-button type="primary" size="mini" round style="margin-left:10px;" @click="batchOcpc">批量回传</el-button>-->
        </el-divider>
      </el-card>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/outcash'
import { all } from '@/api/distributors'
// import { getMenus } from '@/api/menu'
import Pagination from '@/components/Pagination'
import store from '@/store'
import router from '@/router' // Secondary package based on el-pagination
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import { formatMoney } from '@/api/util'
import { getNewClass } from '@/api/contract_class'

export default {
  name: 'DistributorsOutcash',
  components: { Pagination, ImageCropper, PanThumb },
  filters: {
    moenyFormat(value) {
      if (!value) return ''
      return formatMoney(value)
    },
    maskBankCard(value) {
      if (!value) return ''
      const maskedSection = value.slice(0, -4);
      const visibleSection = value.slice(-4);
      return maskedSection.replace(/./g, '*') + visibleSection;
    },
    formatMinutes(value) {
      const hours = Math.floor(value / 60);
      const minutes = value % 60;
      const seconds = "00";
      return `${hours}小时${minutes.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
    },
    formatSecond(value) {
      const hours = Math.floor(value / 3600);
      const minutes = Math.floor((value % 3600) / 60);
      const seconds = value % 60;
      return `${hours}小时${minutes.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
    },
  },
  data() {
    return {
      selectParent:'',
      distributorsList: [],
      distributorsProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      nowBatch: 0,
      checkedIds: [],
      checkAll: false,
      idOptions: [],
      isIndeterminate: true,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      todayMoney: '',
      typeList: [],
      imagecropperShow: false,
      imagecropperKey: 0,
      list: null,
      total: 0,
      listLoading: true,

      listQuery: {
        page: 1,
        limit: 20,
        distributor_id: [],
        time: [],
        status: '',
        is_return:'',
        cash_type:''

      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      class_id: [],
      timeMoney: '',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getSelector()
  },
  methods: {
    handleCommand({row, type}) { // 解构参数对象
      switch (type) {
        case 'stop':
          this.stopOrder(row)
          break
        default:
          this.stopOrder(row)
          break
      }
    },
    stopOrder(row){
      if(row.status  != 'using'){
        this.$message.info('只能结束当前正在进行中的订单')
        return ''
      }
      stopOrder(row.id).then(response=>{
        this.$notify.info({
          title: '消息提示',
          message: response.msg,
          offset: 100
        })
      })
    },
    getSelector(){
      all('all').then(response=>{
        this.distributorsList = response.data
      })
    },
    handleCheckedIdsChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.idOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.idOptions.length
    },
    handleCheckAllChange(val) {
      this.checkedIds = val ? this.idOptions : []
      this.isIndeterminate = false
    },
    toUrl(contract_id) {
      window.open('https://www.wenhetong.com/contractdetail/' + contract_id + '.html')
    },
    getAccount() {
      getAll().then(response => {
        this.account_list = response.data// Just to simulate the time of the request
      })
    },
    handleClickExport() {
      if (this.listQuery.time.length > 0) {
        let search = JSON.stringify(this.listQuery)
        window.open('/api/excel/export_keyword?search=' + search)
      } else {
        this.$message.info('请先选择下载时间段')
      }
    },
    getList() {
      this.listLoading = true
      if (Array.isArray(this.selectParent)) {
        this.listQuery.distributor_id = this.selectParent[this.selectParent.length - 1];
      }else{
        this.listQuery.distributor_id = ''
      }
      getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
        this.idOptions = []
        this.checkedIds = []
        for (var i in this.list) {
            this.idOptions[i] = this.list[i].id
        }
      })
    },
    change_planid(id) {
      this.$prompt('请输入推广账户id', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '格式不正确'
      }).then(({ value }) => {
        change_planid(id, value).then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消绑定'
        })
      })
    },
    resetForm() {
      this.dialogFormVisible = false
    },
    resetTemp() {

    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
<style scoped>
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
</style>
